<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- v-model:在表单控件或者组件上创建双向绑定 -->
        <input type="text" v-model="inputVal">
        <!--  -->
        <h1>多行文本信息：</h1>
        <textarea name="" id="" cols="30" rows="10" v-model="textareaVal"></textarea>
        <!-- 多个复选框： -->
        <h1>多个复选框：</h1>
        <input type="checkbox" name="" id="checkbox1" value="usa" v-model="chekboxNames"/>
        <label for="checkbox1">美国</label>
        <input type="checkbox" name="" id="checkbox2" value="cn" v-model="chekboxNames"/>
        <label for="checkbox2">中国</label>
        <input type="checkbox" name="" id="checkbox3" value="en" v-model="chekboxNames"/>
        <label for="checkbox3">英国</label>
        {{chekboxNames}}
        <!-- 单个复选框：选中时checkbox1为true，没有选中时checkbox1为false -->
        <h1>单个复选框</h1>
        <input type="checkbox" id="cbox" value="单个复选框" v-model="checkbox1" />
        <label for="cbox">单个复选框</label>
        
        <!-- radio 单选按钮-->
        <h1>单选按钮:</h1>
        <div id="example-4">
            <input type="radio" id="one" value="One" v-model="picked" />
            <label for="one">One</label>
            <br />
            <input type="radio" id="two" value="Two" v-model="picked" />
            <label for="two">Two</label>
            <br />
            <span>Picked: {{ picked }}</span>
        </div>
        <!-- 下拉框单选 -->
        <h1>下拉框单选</h1>
        <div id="example-5">
            <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
        <!-- 下拉多选，要按住ctrl多选 -->
        <h1>下拉多选，要按住ctrl多选:</h1>
        <div id="example-6">
            <select v-model="selects" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            </select>
            <br>
            <span>Selected: {{ selects }}</span>
        </div>
       


    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                msg:"lay",
                inputVal:"zyx",// 文本信息
                textareaVal:"I'm the Lit",// 多行文本
                chekboxNames:[],// 多个复选框
                checkbox1:"",// 单个复选框:选中时checkbox1为true，没有选中时checkbox1为false
                picked:"",// 单选按钮
                selected:"",// 下拉选框单选
                selects:[],//下拉多选，要按住ctrl多选
            },
            



        })









    </script>



</body>
</html>